import React, { Component } from 'react'
import { Menu } from 'antd'
import { Link, withRouter } from 'react-router-dom'

import './index.css'
import imgUrl from '../../assets/image/logo.png'
import routeNavData from "../../config/routeNavData"

const { SubMenu } = Menu

class LeftNav extends Component {
  getRouterMap = (data, openKeys) => {
    return data.map((item) => {
      if (item.children) {
        return (
          <SubMenu key={item.path} icon={<item.icon />} title={item.title}>
            {this.getRouterMap(item.children, item.path)}
          </SubMenu>
        )
      } else {
        return (
          <Menu.Item key={item.path} icon={<item.icon />}> 
            <Link to={{ pathname: item.path, state: { openKeys, title: item.title } }}>{item.title}</Link>
          </Menu.Item>
        )
      }
    })
  }
  render() {
    let pathname = this.props.location.pathname
    const { state } = this.props.location
    let openKeys = state ? state.openKeys : '/'
    if(pathname.indexOf('administration') !== -1) {
      pathname = '/admin/administration'
      openKeys = 'commodity'
    }
    return (
      <div className="left-nav">
        <header className="left-nav-header">
          <img src={imgUrl} alt="" />
          <h2>React后台</h2>
        </header>
        <div style={{ width: '100%' }}>
          <Menu
            selectedKeys={[pathname]}
            defaultOpenKeys={[openKeys]}
            mode="inline"
            theme="dark"
          >
            { this.getRouterMap(routeNavData) }
          </Menu>
        </div>
      </div>
    )
  }
}

export default withRouter(LeftNav)
